<template>
	<!-- 报名流程 -->
	<view>
		<block v-if="settingk['flow']">
		<view  class="flow">
			<image class="flow-image" :src="settingImageUrl + settingk['flow']" mode="widthFix" @click="showBigImage()"></image>
		</view>
		</block>
		<block v-else>
			<no-data></no-data>
		</block>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from "vuex"
	export default {
		data() {
			return {
				query_setting:{
					settings:"flow"
				}
			};
		},
		computed:{
			...mapState("m_setting",['settings']),
			...mapGetters("m_setting",["settingk"]),
			settingImageUrl(){
				return getApp().globalData.portImageUrl + "set/"
			}
		},
		onLoad(){
			this.getSetting()
		},
		methods:{
			...mapMutations("m_setting",['addToSetting','updateStorageSize']),
			/**
			 * 获取后端配置保存到Storage中，如果在Storage中已经存在，则不在获取，如果需要刷新需要清理缓存才可以重新获取
			 */
			async getSetting(){
				//像数据库请求需要的数据
				let settings_arr = this.query_setting.settings.split(",");
				//判断data中要求加载的Setting是否存在，如果存在跳过请求，如果不存在则请求，并保存在vuex中，vuex会帮助我们保存到Storage中。
				for(let item in settings_arr){
					const findResult = this.settings.findIndex((x) => x.k == settings_arr[item]);
					if(findResult == -1){
						 const {data:res} = await uni.$http.post("Settings/getSettings",{settings:settings_arr[item]});
						 if(res.meta.status == 0) return uni.$showMsg("配置信息\""+settings_arr[item]+"\"请求失败");
						 this.addToSetting(res.data[0]);
					}else{
						continue
					}
				}
				this.updateStorageSize(uni.getStorageInfoSync().currentSize + "KB")
			},
			/**
			 * 点击图片题查看大图
			 */
			showBigImage(url){
				uni.previewImage({
					urls:[this.settingImageUrl + this.settingk['flow']],
					showmenu:false
				})
			}
		}
		
	}
</script>

<style lang="scss">
.flow{
	width: 100%;
	background-color:#fff;
	padding-bottom:20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.flow-image{
	width:100%;
}
</style>
